<template>
  <div ref="containerRef" style="width: 100%; height: 800px; border: 1px solid black; position: relative"></div>
  <!--  <div id="tag" style="border: 1px solid violet; font-size: 20px">标签内容</div>-->
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import ThreeHelper from './ThreeHelper';
import {
  BoxGeometry,
  MeshStandardMaterial,
  Mesh,
  Camera,
  WebGLRenderer,
  Scene,
  MeshBasicMaterial,
  PerspectiveCamera,
  AxesHelper,
  PointLight,
  MeshLambertMaterial,
  Vector2,
} from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import * as THREE from 'three';
import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass';

const containerRef = ref<HTMLDivElement>(null);

onMounted(() => {
  const width = containerRef.value.clientWidth;
  const height = containerRef.value.clientHeight;

  const threeHelper = new ThreeHelper();
  threeHelper.creatRenderer(width, height, containerRef.value);

  const composer = new EffectComposer(threeHelper.renderer);
  composer.setSize(width, height);
  const renderPass = new RenderPass(threeHelper.scene, threeHelper.camera);
  const outlinePass = new OutlinePass(new Vector2(width, height), threeHelper.scene, threeHelper.camera);
  //模型描边颜色，默认白色
  outlinePass.visibleEdgeColor.set(0xffff00);
  //高亮发光描边厚度
  outlinePass.edgeThickness = 4;
  //高亮描边发光强度
  outlinePass.edgeStrength = 6;
  //模型闪烁频率控制，默认0不闪烁
  outlinePass.pulsePeriod = 2;
  composer.addPass(renderPass);
  composer.addPass(outlinePass);
  // composer.render();

  threeHelper.renderer.domElement.addEventListener('click', function (event) {
    // .offsetY、.offsetX以canvas画布左上角为坐标原点,单位px
    const px = event.offsetX;
    const py = event.offsetY;
    //屏幕坐标px、py转WebGL标准设备坐标x、y
    //width、height表示canvas画布宽高度
    const x = (px / width) * 2 - 1;
    const y = -(py / height) * 2 + 1;
    //创建一个射线投射器`Raycaster`
    const raycaster = new THREE.Raycaster();
    //.setFromCamera()计算射线投射器`Raycaster`的射线属性.ray
    // 形象点说就是在点击位置创建一条射线，射线穿过的模型代表选中
    raycaster.setFromCamera(new THREE.Vector2(x, y), threeHelper.camera);
    //.intersectObjects([mesh1, mesh2, mesh3])对参数中的网格模型对象进行射线交叉计算
    // 未选中对象返回空数组[],选中一个对象，数组1个元素，选中两个对象，数组两个元素
    const intersects = raycaster.intersectObjects([threeHelper.mesh]);

    // intersects.length大于0说明，说明选中了模型
    if (intersects.length > 0) {
      // 选中模型的第一个模型，设置为红色
      intersects[0].object.material.color.set(0xff0000);
      intersects[0].object.scale.set(1.2, 1.2, 1.2);
      outlinePass.selectedObjects = [intersects[0].object]; //todo 这行代码不起作用 不知道为什么
      composer.render();
    }
  });
});
</script>

<style scoped lang="less"></style>
